<!DOCTYPE html>
<html>
	<head>
		<!--meta元信息，charset字符集，utf-8中文 -->
		<meta charset="utf-8"/>
		<title>猪猪小票</title>
		<!--样式设计写在style标签中，key：value ； -->
		<style>
			body{/*对整个网页进行样式修饰*/
				width:280px; /*宽度*/
				font-size: 12px;/*字体大小*/
			}
			hr{border: 1px dashed;}
			/*单独样式设置
			  class 使用 .please
			  id 使用 #please
			*/
			.please{
				font-size:26px ;
				font-weight: bold;/*加粗*/
			}
			.customer{
				padding-bottom:10px ;/*左边空一定距离*/
			}
			.number{
				font-size:26px;
				font-weight: bold;
			}
			.self{
				/*padding 修饰四周，上右下左-顺时针，空一定长度*/
				padding-left:110px ;/*左边空一定距离*/
			}
			.note{
				/*padding-top: 20px;上空
				padding-bottom: 20px;下空*/
				margin-top: 20px;
				margin-bottom: 20px;
			}
			.img{
				padding-left:80px ;
			}
			
		</style>
	</head>
	<body>
		<!--div标签会自动换行，span不换行：块，实现页面布局-->
		<div class="customer">顾客联</div>
		<div class="please">请您留意取餐账单号</div>
		<div class="self">自取顾客联</div>
		<div>落难公主小吃店（招商花园城1号店）</div>
		<div>020-12345678</div>
		<div align="center">--结账单--</div>
		<div class="number">账单号：FWQ0520</div>
		<div>账单类型：堂食</div>
		<div>人数：2</div>
		<div>收银员：卓BB</div>
		<div>开单时间:2021-06-26 13:14:20</div>
		<div>结账时间:2021-06-26 13:52:00</div>
		
		<hr />
		<!--表格没有列的概念，他叫做单元格
            页面中换行被解析一个空格
            align横向排列，left居做，right居右，center居中
            valign纵向排列，top居上，center居中，bottom居下
		-->
		<table border="0">
			<tr>
				<td width="50" align="left">数量</td>
				<td width="146">品项</td>
				<td width="50" align="right">金额</td>
			</tr>
			<tr>
				<td valign="top">1</td>
				<!--网页中没有换行，只会解析一个空格
				    必须使用 br/           -->
				<td>落难公主套餐<br />
				    1 X --香烤肠仔包<br />
					1 X --薯条（大）<br />
					1 X --特效热蜂蜜
				</td>
				<td valign="top" align="right">free</td>
			</tr>
		</table>
		
		<hr />
		
		<table border="0">
			<tr>
				<td width="200">合计</td>
				<td width="49" align="right">free</td>
			</tr>
			<tr>
				<td>微信支付</td>
				<td align="right">free</td>
			</tr>
		</table>
		
		<hr />
		
		<div>打印时间:2021-06-26 13:14:15</div>
		
		<hr />
		
		<!--&nbsp; 特殊字符：属于一个空格-->
		<div class="note">&nbsp;&nbsp;根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整</div>
	
	<!--引入图片，只设置一个，会等比缩放
	    src配置图片来源，相对路径，从自己html文件出发去找
		html所在目录下的images目录，images目录下的XX.png
		只设置宽度，高度会自动算，等比缩放，反之亦然
		及设置宽度，也设置高度，会根据设置要求变更-->
	<img class="img" src="43d230ecd9617e8be12c4df0cca3690.jpg" 
	width="120" height="120" />
	
	<div>官网: 查无此网</div>
	<div>联系电话：820-8820-8820 dhc</div>
	<br />
	<br />
	</body>
</html>
